<template lang="">
    <div>
       <input v-model="leftNum" type="number" />
       <select v-model="rule">
            <option v-for="(item, index) in arr" :value="item.value" :key="index">{{ item.label }}</option>
            <!-- <option value="-">减法</option>
            <option value="/">除法</option>
            <option value="*">乘法</option> -->
       </select>
       <input v-model="right" type="number" />
       <button @click="setResultNum">=</button>
       {{ resultNum }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            leftNum: 1,
            right: 1,
            resultNum: null,
            rule: '+',
            arr: [
                {
                    label: '加法',
                    value: '+'
                },
                {
                    label: '减法',
                    value: '-'
                },
                {
                    label: '乘法',
                    value: '*'
                },
                {
                    label: '除法',
                    value: '/'
                },
                {
                    label: '幂运算',
                    value: '**'
                }
            ]
        }
    },
    methods: {
        setResultNum() {
            if (!this.leftNum || !this.right) return alert('非法参数！')
            if (this.rule === '+') this.resultNum = Number(this.leftNum) + Number(this.right)
            if (this.rule === '-') this.resultNum = Number(this.leftNum) - Number(this.right)
            if (this.rule === '*') this.resultNum = Number(this.leftNum) * Number(this.right)
            if (this.rule === '/') this.resultNum = Number(this.leftNum) / Number(this.right)
            if (this.rule === '**') this.resultNum = Number(this.leftNum) ** Number(this.right)
        }
    }
}
</script>
<style lang="">
    
</style>